<template>
  <div class="area-methods">
    <div class="title-box">
      <div class="title">河系方案</div>
      <div class="form-box">
        <div>
          <span>方案名称：</span>
          <el-input v-model="form.scName" placeholder="请输入" />
          <span>开始时间：</span>
          <el-date-picker v-model="form.sTime" type="datetime" placeholder="请选择时间" />
          <span>结束时间：</span>
          <el-date-picker v-model="form.eTime" type="datetime" placeholder="请选择时间" />
        </div>
        <div class="btn-box">
          <el-button type="primary" @click="handleRiverScheme">查询</el-button>
          <el-button type="primary" @click="handleScheme">新建</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="state.tableData"
          highlight-current-row
          border
          style="width: 100%"
          @current-change="handleCurrentChange"
        >
          <el-table-column label="单选" width="100" align="center">
            <template #default="scope">
              <el-radio
                v-model="CurrentItem"
                :label="scope.row"
                @change="getCurrentRow(scope.row)"
                >{{ '' }}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="scName"
            label="方案名称"
            show-overflow-tooltip
            width="200"
            align="center"
          />
          <el-table-column prop="creatorName" label="创建人" align="center" />
          <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column prop="name" label="操作" width="160" align="center">
            <template #default="{ row }">
              <el-button type="danger" @click="handleDeleteScheme(row)">删除</el-button>
              <el-button type="primary" @click="handleScheme(row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="发布" align="center">
            <template #default="{ row }">
              <el-switch
                v-model="row.isPublish"
                :active-value="1"
                :inactive-value="0"
                @change="handleChangeStatus($event, row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="detail-box">
      <div class="title">河系方案详情</div>
      <div class="detail-top">
        <div class="name-box">
          <span>方案名称</span>
          <el-input v-model="state.selectedTitle" placeholder="请输入" :disabled="true" />
        </div>
      </div>
      <div class="detail-bottom">
        <el-tabs>
          <el-tab-pane lazy label="预报配置信息">
            <ConfigInfo
              :schemeId="state.schemeId"
              :zId="state.zId"
              @handleSaveScheme="handleSaveScheme"
            />
          </el-tab-pane>
          <el-tab-pane lazy label="场次计算信息">
            <PlayInfo
              :schemeId="state.schemeId"
              :zoneId="props.zoneId"
              :zId="state.zId"
              @showDialog="showDialog"
            />
          </el-tab-pane>
          <el-tab-pane lazy label="分析结果">
            <ResultInfo :schemeId="state.schemeId" :zId="state.zId" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog
      top="10px"
      class="el-dialog-box"
      title="场次计算信息"
      v-model="provingItem"
      width="95%"
      :before-close="closeProVingItem"
      @opened="openDiag"
    >
      <!--showBtn 用于控制右侧放大按钮显隐-->
      <PlayInfo
        :zId="state.zId"
        :zoneId="props.zoneId"
        :schemeId="state.schemeId"
        :showBtn="false"
      />
    </el-dialog>
    <RiverModal ref="riverModalRef" />
    <riverScheme
      ref="riverSchemeRef"
      @handleSaveRiverScheme="handleSaveRiverScheme"
      :zId="state.zId"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { renderTime } from '@/utils/index'
import emitter from '@/utils/bus'
import {
  getRiverScheme,
  saveRiverScheme,
  deleteRiverScheme,
  setPublishRsys
} from '@/services/modules/compute-methods'
//预报配置信息
import ConfigInfo from './cpns/configInfo/index.vue'
//场次计算信息
import PlayInfo from './cpns/playInfo/index.vue'
//评价结果
import ResultInfo from './cpns/resultInfo/index.vue'
//河系方案弹框
import riverScheme from './cpns/riverScheme/index.vue'
//新建河系
import RiverModal from '@/pages/ComputeMethods/cpns/riverModal/index.vue'
const form = reactive({})
const riverModalRef = ref(null)
const riverSchemeRef = ref(null)
const state = reactive({
  schemeId: 0,
  isPublic: true,
  selectedTitle: '',
  tableData: [],
  zId: 0,
  title: ''
})
// const builtPlanRef = ref(null)
let CurrentItem = ref('')
// 控制放大弹框
let provingItem = ref(false)

const props = defineProps({
  zId: {
    type: Number,
    default: 0
  },
  zoneId: {
    type: Number,
    default: 1
  }
})
watch(
  () => props.zId,
  async () => {
    await schemeList(props.zId)
    state.zId = props.zId
    if (state.tableData[0]) {
      getCurrentRow(state.tableData[0])
    }
  },
  { immediate: true, deep: true }
)
//切换发布状态
const handleChangeStatus = (isPublish, row) => {
  setPublishRsys({
    // 发布状态
    isPublish,
    // 方案ID
    id: row.id
  }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('发布状态已更改')
      // 刷新列表
      schemeList(props.zId)
    }
  })
}
// 场次计算子组件回调事件打开弹框
function showDialog() {
  provingItem.value = true
}
// 关闭弹框调用事件
function closeProVingItem() {
  provingItem.value = false
}
// 刷新echarts
function openDiag() {
  nextTick(() => {
    emitter.emit('initEcharts')
  })
}
function handleDeleteScheme(row) {
  ElMessageBox.confirm(`是否删除${row.scName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteRiverScheme({ id: row.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          schemeList(props.zId)
        }
      })
    })
    .catch(() => {})
}

// 新建/编辑 河系方案
function handleScheme(row) {
  state.schemeId = ''
  riverSchemeRef.value.handleOpenModal({ ...row, zoneId: props.zId })
}
//保存河系方案
function handleSaveScheme(value, name) {
  // 编辑保存河系方案
  if (state.schemeId) {
    saveRiverScheme({
      id: state.schemeId,
      scName: name,
      rsid: props.zId,
      zoneSchemes: [value]
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg)
        schemeList(props.zId)
        backClosePlan()
      }
    })
  } else {
    saveRiverScheme({
      scName: name,
      rsid: props.zId,
      zoneSchemes: [value]
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg)
        schemeList(props.zId)
        backClosePlan()
      }
    })
  }
}
function handleSaveRiverScheme(item) {
  saveRiverScheme(item).then((res) => {
    if (res.code === 200) {
      schemeList(props.zId)
    }
  })
}
//查看河系方案
function handleRiverScheme() {
  schemeList(props.zId)
}
//根据河系获取方案列表
function schemeList(item) {
  return new Promise((resolve, reject) => {
    if (form.sTime) {
      form.sTime = renderTime(form.sTime)
    }
    if (form.eTime) {
      form.eTime = renderTime(form.eTime)
    }
    getRiverScheme({ rsid: item, ...form }).then((res) => {
      if (res.code === 200) {
        state.tableData = res.data
        state.tableData = state.tableData.map((item) => {
          return (item = { ...item, createTime: renderTime(item.createTime) })
        })
        if (state.tableData.length) {
          getCurrentRow(state.tableData[0])
        } else {
          state.selectedTitle = ''
        }
        // getCurrentRow(state.tableData[0])
        resolve(state.tableData)
      }
    })
  })
}
//选中区域方案
function handleCurrentChange(val) {
  if (val) {
    state.selectedTitle = val.scName
  }
}
const getCurrentRow = (item) => {
  CurrentItem.value = item
  state.schemeId = item.id
  console.log(item, '编号')
  state.selectedTitle = item.scName
}
</script>

<style lang="less" scoped>
:deep(.el-dialog-box) {
  height: 90vh;
  margin-top: 5vh !important;
  .el-dialog__body {
    height: calc(100% - 100px);
  }
}
.area-methods {
  width: 100%;
  height: 100%;
  .title-box {
    height: 300px;

    .title {
      height: 25px;
      color: #409eff;
      padding-top: 10px;
      // font-weight: 600;
    }
    .form-box {
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #797979;
      :deep(.el-input) {
        width: 150px;
        margin-right: 30px;
      }

      .btn-box {
        margin-left: 10px;
      }
    }
    .table-box {
      height: calc(100% - 50px);
      box-sizing: border-box;
      padding: 10px 0 10px 0;
      :deep(.el-table) {
        height: 100%;
      }
    }
  }
  .detail-box {
    height: calc(100% - 270px);
    .title {
      height: 25px;
      color: #409eff;
      padding-top: 10px;
      .selected-color {
        color: var(--fold-word-color);
        font-weight: 600;
      }
    }
    .detail-top {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name-box {
        display: flex;
        align-items: center;
        height: 30px;

        span {
          width: 100px;
          color: #797979;
        }
        :deep(el-input) {
          width: 200px;
        }
      }
      .btn-box {
        margin-right: 30px;
      }
    }
    .detail-bottom {
      height: calc(100% - 125px);
      box-sizing: border-box;
      :deep(.el-tabs) {
        height: 100%;
        .el-tabs__content {
          height: calc(100% - 50px);
          .el-tab-pane {
            height: 100%;
          }
        }
      }
      // :deep(.el-tabs--border-card) {
      //   height: 100%;
      //   .el-tabs__content {
      //     height: calc(100% - 100px);
      //     .el-tab-pane {
      //       height: 100%;
      //     }
      //   }
      // }
    }
  }
}
</style>
